<template>
  <div class="login">
    <div class="login-wrapper">
      <div class="login-title">知乎问题检测平台</div>
      <div class="login-desc">可以实现检测指定问题、大V以及答主的动态</div>
      <el-form :model="form" :rules="rules" ref="formRef" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="form.username" :prefix-icon="User" placeholder="邮箱账号" size="large">
            <template #append>
              <el-select v-model="form.username_suffix" placeholder="请选择邮箱类型" style="width: 120px" size="large">
                <email-options></email-options>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" :prefix-icon="Lock" show-password placeholder="密码" size="large"></el-input>
        </el-form-item>
        <el-form-item class="verify-code" prop="verify_code" style="margin-bottom: 10px;">
          <el-input v-model="form.verify_code" placeholder="请输入验证码" size="large"></el-input>
          <img :src="imgCode.code" title="看不清，点击图片换一张" alt="" @click="getImgCode">
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button :loading="loading" type="primary" size="large" @click.native="login">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import http from '@/utils/http';
import { useMessage } from '@/utils/utils';
import type { FormInstance } from 'element-plus';
import { onMounted, reactive, ref, type Ref } from 'vue';
import EmailOptions from '@/components/email-options.vue'
import { User, Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { token_alia } from '@/global.config';
import { useCrypto } from '@/hooks/node-forge';

const router = useRouter()
const form = reactive({
  username: '',
  username_suffix: '@163.com',
  password: '',
  verify_code: '',
  verify_id: ''
})
const rules = reactive({
  username: [
    { required: true, message: '请输入邮箱账号', trigger: ['blur'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur'] }
  ],
  verify_code: [
    { required: true, message: '请输入验证码', trigger: ['blur'] }
  ]
})
// 图形验证码
const imgCode = reactive({
  id: '-',
  code: ''
})
const formRef: Ref<FormInstance | null> = ref(null)
const loading = ref(false)

/**
 * 回调函数
 */
 const login = () => {
  formRef.value && formRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      useCrypto(form.password).then(res => {
        const { data, label } = res
        http('/login', {
          email: form.username + form.username_suffix,
          password: data,
          verify_id: form.verify_id,
          verify_code: form.verify_code,
          label
        }).then((res: any) => {
          if (res.code === 200) {
            localStorage.setItem(token_alia, res.data.token)
            useMessage('登录成功', 'success')
            router.push({ path: '/' })
          } else {
            useMessage(res.data, 'error')
            getImgCode()
            loading.value = false
          }
        }).catch(error => {
          useMessage(error.message, 'error')
          getImgCode()
          loading.value = false
        })
      })
    }
  })
}
// 获取图形验证码
const getImgCode = () => {
  http('/tool/imgCreate', {
    last_id: imgCode.id ? imgCode.id : '-'
  }).then((res: any) => {
    imgCode.id = res.data.id
    imgCode.code = res.data.data
    form.verify_id = res.data.id
  })
}
getImgCode()

onMounted(() => {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.keyCode === 13) {
      e.preventDefault()
      login()
    }
  })

})
</script>
<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7f9;
  &-wrapper {
    width: 500px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    .el-input__validateIcon {
      display: none !important;
    }
    .el-input-group__append .el-select {
      width: 130px !important;
    }
    .el-input-group__append .el-select .el-select__wrapper {
      padding: 8px 10px !important;
    }
  }
  &-title {
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 4px;
    color: #000000d9;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  &-desc {
    margin-top: 12px;
    color: #00000073;
    display: flex;
    justify-content: center;
  }
}
.el-form.login-form{
  padding: 30px 15px 15px;
  .el-input__inner{
    background-color: rgba(255,255,255,0.8);
    // font-size: 17px !important;
  }
  .el-select {
    .el-input--suffix {
      .el-input__wrapper {
        padding: 1px 8px !important;
      }
      .el-input__inner {
        background-color: transparent !important;
      }
    }
  }
  .verify-code {
    .el-form-item__content {
      justify-content: space-between;
      flex-wrap: nowrap;
      img {
        height: 40px;
        margin-left: 10px;
        border-radius: 4px;
        flex-shrink: 0;
        cursor: pointer;
      }
    }
  }
}
.login_btn{
  margin-bottom: 0px;
  button{
    width: 100%;
    font-size: 16px;
  }
}
</style>